<template>
  <el-container>
    <el-header style="background-color: rgb(0, 199, 140);color: aliceblue">
      <strong style="float: left;size: 1000px;font-size: 28px; color:gold;">REACTOR</strong>
      <div class="header-avatar">
        <div class="block">
          <el-avatar shape="square" :size="40" :src="userInfo.icon_url"></el-avatar>
        </div>
        <el-dropdown style="color: aliceblue; margin-left: -30px;">
						<span class="el-dropdown-link">
						{{ userInfo.username }}<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="goCheckInfo">个人资料</el-dropdown-item>
            <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div style="float: right; margin-right: -35px;">
        <span>
          <router-link to="/StudentIndex" style="color: white; margin-right: 20px;">主页</router-link>
        </span>
      </div>
      <el-dialog
          title="个人资料"
          :visible.sync="centerDialogVisible"
          width="25%"
          center>
        <div class="check-info" v-if="showInfo">
          <div class="check-avatar">
            <el-avatar shape="square" :size="150" :src="userInfo.icon_url"></el-avatar>
          </div>
          <h4 style="font-size: 18px; margin-top: -15px;">用户名:&nbsp;&nbsp;<span
              style="font-weight: normal">{{ userInfo.username }}</span>
          </h4>
          <h4 style="font-size: 18px; margin-top: -15px;">电话号码:&nbsp;&nbsp;<span
              style="font-weight: normal">{{ userInfo.mobile }}</span></h4>
          <h4 style="font-size: 18px; margin-top: -15px;">身份角色:&nbsp;&nbsp;<span
              style="font-weight: normal">{{ userInfo.role_name }}</span></h4>
          <h4 style="font-size: 18px; margin-top: -15px;">邮箱地址:&nbsp;&nbsp;<span
              style="font-weight: normal">{{ userInfo.email }}</span></h4>
        </div>
        <div class="modify-info" v-if="showEdit">
          <div class="upload-info">
            <el-upload
                class="avatar-uploader"
                :action="upload_url"
                :headers="header"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
              <img v-if="userInfo.icon_url" :src="userInfo.icon_url" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <el-input v-model="userInfo.username" placeholder="请输入用户名" style="width: 250px;"></el-input>
            <el-input v-model="userInfo.mobile" placeholder="请输入电话号码" style="width: 250px;"></el-input>
            <el-input v-model="userInfo.email" placeholder="请输入邮箱地址" style="width: 250px;"></el-input>
          </div>
          <el-button type="success" @click="submitInfo">提交</el-button>
        </div>
        <div class="modify-pwd" v-if="editPwd">
          <div class="upload-info">
            <el-input type="password" clearable v-model="changePwd.old_password" placeholder="请输入原密码"
                      style="width: 250px;"></el-input>
            <el-input type="password" clearable v-model="changePwd.new_password" placeholder="请输入新密码"
                      style="width: 250px;"></el-input>
            <el-input type="password" clearable v-model="changePwd.confirm_password" placeholder="请确认新密码"
                      style="width: 250px;"></el-input>
          </div>
          <el-button type="danger" @click="submitPwd" @keyup.enter="submitPwd">提交</el-button>
        </div>
        <span slot="footer" class="dialog-footer">
    <el-button style="margin-right: 20px;" @click="goEditPwd" type="text">修改密码</el-button>
    <el-button style="margin-left: 20px;" type="text" @click="goEditInfo">修改资料</el-button>
  </span>
      </el-dialog>
    </el-header>
    <el-container>
      <el-main>
        <Ueditor v-show="false"></Ueditor>
        <div>
          <router-view>
          </router-view>
        </div>
      </el-main>
    </el-container>
    <div style="text-align: center; padding-bottom: 10px;">&COPY;copyleft@海饼干</div>
  </el-container>
</template>

<script>
import Ueditor from '@/components/Ueditor'

export default {
  name: "Home",
  components: {Ueditor,},
  data() {
    return {
      userInfo: {},
      banner_list: [],
      changePwd: {
        old_password: null,
        new_password: null,
        confirm_password: null,
      },
      showInfo: true,
      showEdit: false,
      editPwd: false,
      upload_url: '',
      header: {},
      centerDialogVisible: false,
    }
  },
  created() {
    this.getUserInfo()
    this.header['token'] = this.$cookies.get('token')
    this.upload_url = this.$settings.BASE_URL + '/user/edit_userinfo/upload_avatar/'
  },
  methods: {
    submitPwd() {
      if (this.changePwd.new_password !== this.changePwd.confirm_password) {
        this.$message({
          type: 'warning',
          message: '两次密码不一致,请再次确认',
          duration: 3000,
        })
      } else {
        this.$http({
          url: this.$settings.BASE_URL + '/user/edit_userinfo/change_pwd/',
          method: 'post',
          data: this.changePwd,
        }).then(res => {
          if (res.data.code === 20000) {
            this.$message({
              type: 'success',
              message: '密码修改成功,即将退出登录',
              duration: 3000,
              onClose: () => {
                this.logout()
              }
            })
          } else {
            this.$message({
              type: 'error',
              message: res.data.msg,
              duration: 3000,
            })
          }
        })
      }
    },
    submitInfo() {
      let formData = new FormData()
      for (let item in this.userInfo) {
        formData.append(item, this.userInfo[item])
      }
      this.$http({
        url: this.$settings.BASE_URL + '/user/edit_userinfo/update_userinfo/',
        method: 'post',
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data',
        }
      }).then(res => {
        if (res.data.code === 20000) {
          this.goCheckInfo()
          this.$message({
            type: 'success',
            message: res.data.msg,
            duration: 3000,
          })
        } else {
          this.$message({
            type: 'error',
            message: '修改失败,用户名或邮箱已存在',
            duration: 3000,
          })
        }
      })
    },
    goCheckInfo() {
      this.centerDialogVisible = true
      this.showInfo = true
      this.showEdit = false
      this.editPwd = false
    },
    goEditPwd() {
      this.showInfo = false
      this.showEdit = false
      this.editPwd = true
    },
    goEditInfo() {
      this.showInfo = false
      this.showEdit = true
      this.editPwd = false
    },
    handleAvatarSuccess(res, file) {
      this.userInfo.icon_url = URL.createObjectURL(file.raw);
      this.userInfo.icon = file.raw
    },
    beforeAvatarUpload(file) {
      this.userInfo.icon_url = URL.createObjectURL(file.raw);
      this.userInfo.icon = file.raw
    },
    getUserInfo() {
      let user_id = this.$cookies.get('userinfo').user_id
      this.$http({
        url: this.$settings.BASE_URL + '/user/edit_userinfo/get_userinfo/',
        method: 'get',
        params: {user_id: user_id},
      }).then(res => {
        if (res.data.code === 20000) {
          this.userInfo = res.data.result
        }
      })
    },
    logout() {
      this.$cookies.remove('token')
      this.$cookies.remove('userinfo')
      this.$store.commit("resetState")
      this.$router.push("/login")
    }
  }
}
</script>

<style scoped>
.upload-info {
  margin-top: -20px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 140px;
  height: 140px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 140px;
  height: 140px;
  display: block;
}

.check-info {
  text-align: center;
  height: 300px;
  margin-top: -25px;
}

.modify-info {
  text-align: center;
  height: 350px;
}

.modify-pwd {
  text-align: center;
  height: 200px;
}

.block {
  position: absolute;
  right: 40px;
  top: 10px;
}

.el-container {
  padding: 0;
  margin: 0;
  height: 100%;
}

.header-avatar {
  float: right;
  width: 210px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-right: 15px;
}

.el-dropdown-link {
  cursor: pointer;
}

.el-header {
  background-color: #17B3A3;
  color: #333;
  text-align: center;
  line-height: 60px;
}


.el-main {
  color: #333;
  padding: 0;
}

a {
  text-decoration: none;
}
</style>
